<template>
  <div>
    <div>
        已完成{{go}}
        全部{{list.length}}
    </div>
    <div v-if="go>0"><button @click="dels">清除已完成</button></div>
  </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name:'navfooter',
  props:{
    list:{
      type:Array,
      required:true
    }
  },
  setup(props,ctx) {
    let go=computed(()=>{
      //过滤
      let arr= props.list.filter(item=>{
        return item.text
      })
      return arr.length
    })
    // let all=ref(3)
    //清除已完成的
    let dels=()=>{
        // console.log(333);
        //过滤未完成的
         let arr= props.list.filter(item=>{
        return item.text==false
      })
        ctx.emit('dels',arr)
    }
    return{
        go,
        // all,
        dels
    }
  }
}
</script>
<style lang="scss" scoped>

</style>